Turn a collection list into a responsive grid - CSS grid layouts
HTML-код
- Опубликовано: 21 окт 2024
- Create a collection list, then turn it into a responsive grid layout that automatically adjusts to fit different screen sizes.
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
I just learned like 100000000 things in this video, why didn't I just watch this when I started using webflow???? My life, as you said in the video, has been changed forever.
This video saved me A LOT of issues and head aches. Thank you !
Just had to come on here to express my thanks. The default collection list wrapper function is very limited. This trick does the job for me. Thanks a ton!
You weren't wrong: my life has literally been changed forever with the min/max function. 🙏
It just doesn't work. Can somebody help? I set my grid exactly like in the video. I have a 3x2 grid and it's set to auto-fit with the minimum of 300px. But when resizing the window, nothing happens. The boxes disappear with the edge of the window.
Is their a setting for the grid to wrap columns as the page size gets smaller such as from 4 columns to 3 to 2 then 1 but without skewing the width/height aspect size of any cells
how to fix the first element in the grid not to be empty?
Thank you so very much!
Useful, sarcastic and funny AF!
This is awesome. How would you go about having 1,2 and 3 column layouts? I see how you can drag the containers to have them span as many columns as you want in a layout, but if you had 1,2 or 4 columns items that covered the entire width of the parent I don't see how you could also have a 3 column row that filled the length of the parent as well. Thanks!
They just made a video that covers that: ruclips.net/video/09wolz1jaqE/видео.html
just found out you cannot span a specific collection item in the dynamic grid, since the span will apply to every collection item and you cannot use manual to override it as well.
The auto-fit option doesn't appear when I reduce to 1 column
How can I set up url link to each individual item in collections item to go to a different page and also whenever I set up class to any item it automatically applies to all of them . How can customize each different item by setting up a different class ? . Thank you .
This is what I want to know. Can't believe they didn't cover that part...
So the images have to have the same pixel sizing otherwise this layout won't work.
You can use object-fit to set the width and height of all the images, and crop them if they aren't the correct size. Learn more here: ruclips.net/video/7Ma2GavhHlI/видео.html
@@Webflow am I able to do this with a CMS?
Whenever I publish, I keep getting a weird layout. After inspecting the page, all my CMS items have an inline CSS styling with position:Absolute, and top/left position. Am I missing something?
You left out the most important part - linking each item to the individual collection pages. My biggest frustration with Webflow so far are the pieces of important information that aren't included in many of your videos.
Wrap it in a link block and there you go
How to make each grid block with a link to a project?
Try adding a link block in the collection item, then add your content inside that link block. Hope this helps :)
Is it possible to create a custom layout using Grid where the cells are not all the same size/orientation but then fill the content with collection items?
I don't think that is possible It says you can't create grid areas with Collection lists
and 2. can this be done with Hero lifestyle?? nah, with HEro Layout??
Has anyone tried this recently and got the same layout that he's doing at around 2:06? It's broken no matter what I do. It seems like the image is not extending all the way to the text block like how he's doing it. I cloned webflow's project and copied the section for the collection list to my own project and of course it displays the final output just fine.
Me too! Have you figured this out?
Same here:((
Edit: Got it! You need to select the “Collection Item” and then set “Get BG Image from Blog Posts” to “Main Image”. I made the same mistake and selected the Heading. You will find it on the right hand side at “Colection Item Settings (Gear Icon:))
My grid remains unresponsive at mobile screen. Any ideas?
wow mines too...I'm trying to figure that out now
0:45 but where is the Blogs post?
If you're looking on how to create a collection for your blog posts, you can refer to this article:
university.webflow.com/lesson/webflow-collections-overview
If you're looking on how to create a collection template for for that actual blog post, you can refer to this article:
university.webflow.com/lesson/structure-and-style-collection-pages
Hope this helps :)
Those listing names XD.
Brilliant!!!
Extra! Thanks. Great thanks.
No fields to connect to!
Table for one, please
Thanks
These grids are really unintuitive and glitchy, they've wasted far too much of my time.
I understand your frustration. I have been a web designer/developer myself. I have tried all apps from dreamweaver, wix, sublime text, bootstrap, etc... But for a complex technology like this - this is as simple as it can go. Try Webflow's university and stick with them, they're very entertaining and funny. You won't regret it once you know Webflow. Maybe I can also help in your journey.